import { Component } from 'react';
class IifeCycle extends Component {
  constructor(prop) {
    super(prop);
    console.log('constructor');
  }
  state = {
    opacity: 1,
  };
  onUnload = () => {
    // clearInterval(this.timer)
    // ReactDOM.unmountComponentAtNode(document.getElementById('iife'));
    document.getElementById('iife').remove();
  };
  // 组件将要挂载
  UNSAFE_componentWillMount = () => {
    console.log('组件将要挂载', 'componentWillMount');
  };
  // 组件挂载完毕后调用 一般做一些初始化的事
  componentDidMount = () => {
    console.log('组件挂载完成', 'componentDidMount');
    // this.timer = setInterval(() => {
    //   let { opacity } = this.state;
    //   opacity -= 0.1;
    //   if (opacity <= 0) opacity = 1;
    //   this.setState({
    //     opacity,
    //   });
    //   console.log(this.timer);
    // }, 200);
  };
  // 组件将要被卸载 一般做一些定时器销毁
  componentWillUnmount = () => {
    console.log('组将要被卸载了');
  };
  render() {
    console.log('rander');
    // this.action();
    return (
      <div id="iife">
        <h1>生命周期</h1>
        <h2 style={{ opacity: this.state.opacity }}>react很难学怎么办</h2>
        <button onClick={this.onUnload}>不学了</button>
      </div>
    );
  }
}

export default IifeCycle;
